<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-01 16:06:40
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
div.performance-record
  div.table.mt4.px4
    el-table(
      :data="tableData" 
      :header-cell-style="tableHeaderStyle"
      :cell-style="tableCellStyle"
      empty-text="暂无数据"
      border 
      style="width: 100%")
      el-table-column(prop="id" label="履约ID" width="74")
      el-table-column(prop="order_no" label="关联订单" width="125")
      el-table-column(prop="money" label="借款额度(元)" width="112")
      el-table-column(prop="start_time" label="开始时间" width="117")
      el-table-column(prop="end_time" label="到期时间" width="117")
      el-table-column(prop="status" label="状态" width="74")
        template(v-slot="scope")
          div(:class="initStatusColor(scope.row.status)") {{ initStatusText(scope.row.status) }}      
      el-table-column(prop="is_repaid" label="是否还款" width="88")
        template(v-slot="scope")
            div {{ scope.row.is_repaid == 1 ? "未还款" : "已还款" }} 
      el-table-column(prop="payer" label="还款人" width="88")
        template(v-slot="scope")
          div {{ scope.row.payer ? scope.row.payer : "--" }} 
      el-table-column(prop="repay_time" label="还款时间" width="117")
        template(v-slot="scope")
          div {{ scope.row.repay_time ? scope.row.repay_time : "--" }} 
      el-table-column(prop="createTime" label="创建时间" width="117")
</template>

<script setup>
import { ref, onMounted } from "vue";
import { GuaranteeMoneyLog } from "@/api/common";

defineProps({
  rowId: "",
});

const emits = defineEmits(["cancel", "confirm"]);

const tableHeaderStyle = ref({
  backgroundColor: "#E5E6EB",
  color: "#000000",
  textAlign: "center",
});
const tableCellStyle = ref({
  textAlign: "center",
});
const tableData = ref([
  // {
  //   id: "355",
  //   order_no: "2023090112341289008077",
  //   money: "3000",
  //   start_time: "2023-08-23 12:12:12",
  //   end_time: "2023-09-01 16:34:45",
  //   status: 1,
  //   is_repaid: "否",
  //   payer: "",
  //   repay_time: "",
  //   createtime: "2023-08-11 08:16:23",
  // },
]);

// 生命周期
onMounted(() => {
  getPerformanceRecord();
});

// 获取履约记录列表
const getPerformanceRecord = () => {
  GuaranteeMoneyLog().then((res) => {
    if (res.code == 1) {
      tableData.value = res.data.data;
    }
  });
};

// 状态颜色和文本
const initStatusColor = (status) => {
  return status == 1
    ? ""
    : status == 2
    ? "overdue"
    : status == 3
    ? "refund"
    : "overdue";
};
const initStatusText = (status) => {
  return status == 1
    ? "进行中"
    : status == 2
    ? "已逾期"
    : status == 3
    ? "已还款"
    : "已撤销";
};
</script>

<style lang="stylus" scoped>
.performance-record
  height: 500px;
  overflow: auto;
  .title
    font-size: 24px;
  .form-content
    padding: 0px 66px;
    .require
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
    .no-require
      margin-left: 32px;
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
  .input-width
    width: 245px
  .btn
    width: 178px;
  .overdue
    color: #E84026;
  .refund
    color: #2487E8;
  .no-quota
    margin-top: 200px;
  // 上传图片相关
  .avatar-uploader .el-upload
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  .avatar-uploader .el-upload:hover
    border-color: #dcdfe6;
  .el-icon.avatar-uploader-icon
    font-size: 28px;
    color: #8c939d;
    width: 152px;
    height: 100px;
    text-align: center;
    border: 1px dashed #dcdfe6;
  .avatar-uploader .avatar
    width: 152px;
    height: 100px;
    display: block;
</style>
